<template>
	<div class="theme-map">
		<div class="map-header">
			<input type="text" class="header-input" v-model="content" id="" value="" maxlength="30" placeholder="请输入内容" />
		</div>
		<div class="map-left" :style="{ width: sideWidth }"></div>
		<div class="map-right" :style="{ width: `calc(${sideWidth} + 50px)` }"></div>
		<div :class="{ 'map-center-bottom': true, pre: isPre }">
			<div class="center-bottom-info">描述:<input class="center-info-input" v-model="describe" placeholder="请输入内容" maxlength="70" /></div>
			<div class="center-bottom-time">
				时间:
				<el-date-picker class="com-date-pick" v-model="nowtime" type="date" placeholder="请选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"> </el-date-picker>
			</div>
		</div>
		<div class="map-bottom" v-show="showBottom">
			<div class="bottom-content">
				<div class="info-task">
					文件名称:
					<input type="text" id="task-name" v-model="fileName" value="" placeholder="请输入文件名称" style="padding-left: 10px" />
				</div>
				<div class="bottom-btns">
					<button id="cancel" @click="$emit('close')">取消</button>
					<button id="preview" @click="clickPres">上传</button>
					<button id="download" @click="clickDownload">下载</button>
				</div>
			</div>
		</div>
		<div class="preview-box" v-show="showBox">
			<img src="" id="preview-img" class="box-img" alt="" />
			<span v-show="showIcon" class="preview-close" id="close-btn" @click="clickClose"></span>
		</div>
	</div>
</template>
<script>
import html2canvas from 'html2canvas'
import canvasToImage from 'canvas2image'
import { addScreen, addReport } from '@/api/disaster'

export default {
	name: 'thematicPic',
	data() {
		return {
			showBottom: true,
			isPre: false,
			content: '',
			describe: '',
			baseimage: '',
			imgRes: '',
			fileName: '',
			time: '',
			nowtime: new Date(),
			showBox: false,
			showIcon: false,
			imagearray: ''
		}
	},
	computed: {
		sideWidth() {
			if (this.$store.state.app.screenWidth == 4000) {
				return '30%'
			} else {
				return '19%'
			}
		}
	},
	mounted() {
		this.prtScreen()
	},
	methods: {
		// 上传按钮
		async clickPres() {
			if (!this.content) {
				this.$message({
					offset: 100,
					message: '请输入内容',
					type: 'warning'
				})
				return
			}
			if (!this.describe) {
				this.$message({
					offset: 100,
					message: '请输入信息描述',
					type: 'warning'
				})
				return
			}
			if (!this.fileName) {
				this.$message({
					offset: 100,
					message: '请输入文件名',
					type: 'warning'
				})
				return
			}
			let param = new FormData()
			param.append('mlName', this.content)
			param.append('mlDescribe', this.describe)
			param.append('mlClassification', '1')
			param.append('file', this.baseimage)

			await addScreen(param).then((res) => {
				if (res.data.status == 200) {
					this.$message({
						offset: 100,
						message: '上传成功',
						type: 'success'
					})
					this.content = ''
					this.describe = ''
					this.baseimage = ''
				}
			})
		},
		clickPre() {
			this.showBottom = false
			this.isPre = true
			this.showBox = true
			this.prtScreen()
			setTimeout(() => {
				this.showIcon = true
				this.showBottom = false
			}, 800)
		},
		clickClose() {
			this.showBox = false
			this.showBottom = true
			this.isPre = false
			this.showIcon = false
		},
		prtScreen() {
			let that = this
			document.getElementById('preview-img').src = ''
			var content = document.getElementById('app')
			html2canvas(content).then((canvas) => {
				var base64Url = canvas.toDataURL('image/png')
				document.getElementById('preview-img').src = base64Url
				that.imgRes = base64Url

				that.baseimage = that.imgRes.slice(22)
			})
		},
		// 下载图片
		clickDownload() {
			if (!this.fileName) {
				this.$message({
					offset: 100,
					message: '请输入文件名',
					type: 'warning'
				})
				return
			}
			this.downloadRes()
		},
		downloadRes: function () {
			if (!this.imgRes) {
				this.prtScreen()
				setTimeout(() => {
					this.startDownload()
				}, 3000)
				return
			}
			this.startDownload()
		},
		startDownload: function () {
			let that = this
			let aLink = document.createElement('a')
			let blob = this.base64ToBlob(that.imgRes) // new Blob([content]);
			let evt = document.createEvent('HTMLEvents')
			evt.initEvent('click', true, true) // initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
			aLink.download = this.fileName + '.png'
			aLink.href = URL.createObjectURL(blob)
			aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window })) // 兼容火狐
		},
		base64ToBlob(code) {
			let parts = code.split(';base64,')
			let contentType = parts[0].split(':')[1]
			let raw = window.atob(parts[1])
			let rawLength = raw.length

			let uInt8Array = new Uint8Array(rawLength)

			for (let i = 0; i < rawLength; ++i) {
				uInt8Array[i] = raw.charCodeAt(i)
			}
			return new Blob([uInt8Array], { type: contentType })
		}
	}
}
</script>
<style lang="scss" scoped>
.theme-map {
	z-index: 10000000;
	.map-header {
		position: fixed;
		width: 100%;
		height: 10%;
		background-color: white;
		top: 0px;
		left: 0px;
		z-index: 100000;
		.header-input {
			width: 94%;
			height: 51px;
			background: white;
			border-radius: 2px;
			margin-left: 3%;
			margin-top: 14px;
			text-align: center;
			font-size: 28px;
			border: 0px !important;
			letter-spacing: 16px;
			font-family: none;
			font-weight: 600;
			color: #000;
		}
	}
	.map-left {
		position: fixed;
		top: 8%;
		left: 0px;
		width: 19%;
		height: 80%;
		background-color: white;
		z-index: 100000;
	}

	.map-right {
		position: fixed;
		top: 8%;
		right: 0px;
		width: 19%;
		height: 80%;
		background-color: white;
		z-index: 100000;
	}

	.map-center-bottom {
		position: fixed;
		top: 88%;
		left: 0px;
		width: 100%;
		height: 7%;
		background-color: white;
		z-index: 1000000;
		.center-bottom-info {
			color: #000;
			margin-top: 9px;
			margin-left: 58px;
			font-family: none;
			font-size: 16px;
			letter-spacing: 5px;
			width: 400px;
			.center-info-input {
				width: 80%;
				border: 0px !important;
				background: white;
				padding-left: 5px;
				font-family: none;
				font-size: 16px;
				letter-spacing: 5px;
				color: #000;
				display: inline-block;
			}
		}
		.center-bottom-time {
			display: inline-block;
			position: absolute;
			right: -24px;
			font-size: 16px;
			color: #000;
			top: 0px;
			margin-top: 9px;
			margin-right: 90px;
			letter-spacing: 5px;
			cursor: pointer;
			.time-select {
				display: inline-block;
				width: 278px;
				height: 40px;
				font-size: 15px;
				border-radius: 3px;
				cursor: pointer;
			}
		}
	}
	.pre {
		height: 12%;
	}

	.map-bottom {
		position: fixed;
		top: 95%;
		left: 0px;
		width: 100%;
		height: 5%;
		z-index: 10000;
		background-color: #000;
		.bottom-content {
			position: absolute;
			right: 0px;
			height: 100%;
			width: 30%;
			padding: 10px;
			.info-task {
				font-size: 15px;
				color: #a3a3a3;
				display: inline-block;
				input {
					height: 30px;
					width: 222px;
					border-radius: 4px;
					border: none;
					background: white;
				}
			}

			.bottom-btns {
				display: inline-block;
				vertical-align: top;
				button {
					padding: 8px 16px;
					font-size: 12px;
					border-radius: 3px;
					display: inline-block;
					line-height: 1;
					white-space: nowrap;
					cursor: pointer;
					background: #fff;
					border: 1px solid #dcdfe6;
					color: #606266;
					-webkit-appearance: none;
					text-align: center;
					margin-left: 4px;
				}
			}
		}
	}

	.preview-box {
		position: fixed;
		top: 0px;
		left: 0px;
		#preview-img {
			position: fixed;
			width: 68%;
			top: 16%;
			left: 16%;
			height: 70%;
		}
		.preview-close {
			display: inline-block;
			width: 20px;
			height: 20px;
			line-height: 20px;
			position: fixed;
			right: 15%;
			top: 14%;
			border-radius: 10px;
			text-align: center;
			background: #ece8e4;
			color: #000;
		}
		.preview-close::after {
			content: '\2716';
			font-size: 20px;
			color: #000;
		}
		.preview-close:hover {
			cursor: pointer;
		}
	}
}
</style>